<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom);
        var option = null;
        var labelRight = {
            position: 'right'
        };
        option = {
            title: {
                text: '交错正负轴标签',
                subtext: 'From ExcelHome',
                sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: 80,
                bottom: 30
            },
            xAxis: {
                type: 'value',
                position: 'top',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
            },
            series: [{
                name: '生活费',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    formatter: '{b}'
                },
                data: [{
                        value: -0.07,
                        label: labelRight
                    },
                    {
                        value: -0.09,
                        label: labelRight
                    },
                    0.2, 0.44,
                    {
                        value: -0.23,
                        label: labelRight
                    },
                    0.08,
                    {
                        value: -0.17,
                        label: labelRight
                    },
                    0.47,
                    {
                        value: -0.36,
                        label: labelRight
                    },
                    0.18
                ]
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option, true);
        }

    </script>
</body>

</html>
